<template>
  <el-container style="width: 100vw;height: 100vh;" class="backbg">
    <el-row style="width: 100%;height: 100%;">
      <el-col style="width: 100%;height: 100%;margin: 0 auto">
        <el-row style="width: 30%;height: 100%;margin: 0 auto;">
          <el-row style="width: 100%;height: 14%;margin-top: 12%">
            <el-image :src="require('../../assets/友友在线聊天室-注册.png')" style="height: 100px;width: 100%;"></el-image>
          </el-row>
          <el-row style="width: 100%;height: 70%;">
            <el-card style="width: 100%;height: 55%;font-family: 微软雅黑;font-size: 23px;" shadow="always">
              <el-form :model="regForm" :rules="rules" ref="regForm" label-width="90px" class="demo-regForm">
                <el-form-item label="用户名" prop="username" >
                  <el-input v-model="regForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" >
                  <el-input v-model="regForm.password" auto-complete="off" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="actPassword" >
                  <el-input v-model="regForm.actPassword" auto-complete="off" type="password"></el-input>
                </el-form-item>
              </el-form>

              <el-button type="primary" style="position: absolute;bottom: 50%;left: 20%;font-size: 20px;width: 100px;" @click="submitData('regForm')">
                注册
              </el-button>
              <el-button type="primary" style="position: absolute;bottom: 50%;left: 50%;font-size: 20px;width: 120px;" @click="backLogin">
                返回登录
              </el-button>
            </el-card>
          </el-row>
        </el-row>
      </el-col>
    </el-row>

  </el-container>
</template>

<script>
import qs from "qs";
import {Loading} from "element-ui";

export default {
  name: "RegisterPage",
  methods:{
    submitData(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/user/register', qs.stringify({ //将js对象转化成url编码的字符串，后面那种headers设置方法，传递post请求
            username: this.regForm.username,
            password: this.regForm.password,
            authCode: this.regForm.authCode==null?'':this.regForm.authCode,
            phoneNumber:this.regForm.phoneNumber
          }), {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then(response => {
            if(response.data.success){
              this.$message({
                message: '注册成功!',
                type: 'success'
              });
            }else {
              let infor=response.data.infor
              if(infor=="hasRegister"){
                this.$message({
                  message: '注册失败，用户名已经注册过!',
                  type: 'error'
                });
              }
              if(infor=="authCode not correct"){
                this.$message({
                  message: '注册失败，授权码不对，请找相关人员获取！',
                  type: 'error'
                });
              }
              if(infor=="system error"){
                this.$message({
                  message: '系统错误，请联系管理员！',
                  type: 'error'
                });
              }
              if(infor=="phoneNumber registered"){
                this.$message({
                  message: '手机号已绑定，请更换手机！',
                  type: 'error'
                });
              }
            }
          }).catch(error => {
              this.$message({
                message: '系统繁忙，请重试！',
                type: 'error'
              });
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    backLogin(){
      let ld=Loading.service({
        lock:true,
        background:'rgba(255,255,255,0.5)',
      })
      setTimeout(() => {
        ld.close()
        this.$router.replace({
          path:'/login'
        })
      }, 800);

    }
  },
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.regForm.checkPass !== '') {
          this.$refs.regForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.regForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var validateSpace = (rule, value, callback) => {
      let spaceRegex=/\s/
      //如果有空格，则执行回调函数
      if(spaceRegex.test(value)){
        callback(new Error('存在空格！'));
      }
      callback();
    };
    return {
      isAdmin:false,
      user:{
        isAdmin:false,
        username:'',
        password:'',
        actPassword:'',
        authCode:null
      },
      regForm: {
        isAdmin: false,
        username: '',
        password: '',
        actPassword:'',
        authCode:null,
        phoneNumber:''
      },

      rules: {
        username: [
          { validator: validateSpace, trigger: 'blur',required: true},
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },

        ],
        password: [
          { validator: validateSpace, trigger: 'blur',required: true},
          { validator: validatePass, trigger: 'blur',required: true},
          { min:6, max:13, message: '长度在 6 到 13 个字符', trigger: 'blur'}
        ],
        actPassword:[
          { validator: validateSpace, trigger: 'blur',required: true},
          { validator: validatePass2, trigger: 'blur',required: true},
          { min:6, max:13, message: '长度在 6 到 13 个字符', trigger: 'blur'}
        ],
        authCode:[
          { validator: validateSpace, trigger: 'blur',required: true},
          { required: true, message: '请输入授权码', trigger: 'blur' },
        ],
        phoneNumber:[
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style scoped>
  .backbg{
    background-image: url("../../assets/bg2.png");
  }
</style>